Tabellen
Letztes Update:
26. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Tabellen dienen zur visuell übersichtlich und leicht erfassbaren Darstellung von kategorisierbaren Daten, welche nach mindestens zwei Kategorien in Zeilen und Spalten geordnet zusammengestellt werden.
Informationen mit vielen Zusammenhängen lassen sich oft als Tabellen besser darstellen. Sie geben Seiten Struktur und Übersichtlichkeit für größere Datenmengen.
- kommt mit wenigen Wörtern aus
- machen Informationen leichter erfassbar
- vermitteln rasch die wichtigsten Begriffe
- geben der Seite Struktur
Wann kommt dieses Element zum Einsatz?
Immer wenn es möglich ist, Informationen kategorisierbar darzustellen, sollen Tabellen statt Lauftext zum Einsatz kommen.
Für Tabellen kommen zwei unterschiedliche Styles zum Einsatz:
A) „klein“
B) „gross“
Es werden keine 1-spaltigen bzw. 1-zeiligen Tabellen verwendet. Für Informationen mit nur einer Dimension siehe Listen
Sonderform Vergleichstabelle: Speziell bei mehreren ähnlichen Produkten, oder Produkten mit unterschiedlichen Ausprägungen können Vergleichstabellen für die Nutzer hilfreich sein. Derartige Vergleichstabellen sind aktuell nicht im Einsatz. Konzeption folgt im Bedarfsfall.
UX Konzeption
Informationsgestaltung: Zeilen und Spalten
Die initiale Frage bei mehrdimensionalen Informationen ist, welche der Informationen in Zeilen und welche in Spalten organisiert werden soll.
- Jene Informationen, die verglichen werden sollen, kommen in die Spalten.
- Müssen sehr viele Eigenschaften von wenigen Kategorien verglichen werden, kommen die Dinge die verglichen werden sollen in die Zeilen. Dies vermeidet horizontales scrollen.
Allgemeines
- Jene Information nach denen der Nutzer am Wahrscheinlichsten sucht, stehen in der ersten Spalte.
- Tabellen passen sich derart an das Design an, dass keine Scrollbalken nötig sind. (siehe auch mobile Darstellung)
- Tabellen müssen in einer mit Screenreadern lesbaren Auszeichnung gestaltet werden. Spaltenüberschriften, Zeilenbeschrifungen, Datenzellen sind jeweils eindeutig erkennbar. Zusätzlich sind Überschriften und Beschriftungen eindeutig den jeweiligen Zellen zuordenbar.
- Nachkommastellen bei Zahlen auf ein sinnvolles Maß begrenzen.
- Einheiten werden im Tabellenheader in eckige Klammern gesetzt (nicht in jeder Zelle wiederholen)
- Funktionen für Nutzer zum Ein-/Ausblenden von Spalten oder Zeilen kommen NICHT zum Einsatz.
- Funktionen mit welchen Nutzer Spalten verschieben können kommen NICHT zum Einsatz.
- Eine Veränderung der Spaltenbreite durch den Nutzer ist NICHT möglich.
Überschrift
Jede Tabelle erhält eine erklärende Überschrift, im Idealfall auch eine kurze erklärende Einleitung.
Tabellenheader
- Tabellenheader bzw. Tabellenkopf muss vorhanden sein.
- Tabellenheader werden bei größeren Tabellen fixiert, so kann der Nutzer die Tabellenzeilen scrollen und sieht zu jeder Zeit den Tabellenheader
- Einheiten werden im Tabellenheader in eckigen Klammern gesetzt (nicht in jeder Zelle wiederholen)
Sortierung
- Tabellen sollen initial nach der ersten Spalte, aufsteigend (d.h. von A bis Z) sortiert sein.
- Details zur Sortierung von Spalten in Tabellen siehe Details siehe Sortieren.
Übersichtlichkeit erhöhen
- Zur besseren Wahrnehmbarkeit bekommt die jeweilige Zeile bei Hovereinen hellgrauen Hintergrund. In der mobilen Darstellung hat jede zweite Zeile einen fixen hellgrauen Hintergrund (abwechselnde Zeilenfarben „Zebra stripes“).
Ausrichtung der Zelleninhalte:
| Texte in der Kopfzeile/Tabellenheader | linksbündig |
| Texte, alphanumerische Werte, verlinkte Inhalte,… | linksbündig |
| Preise | mit Tausendertrennzeichen formatieren und am Komma ausrichten (sonst rechtsbündig) |
| Zahlen | rechtsbündig; Nachkommastellen – sofern nötig – auf ein sinnvolles Maß begrenzen und in der gesamten Tabelle in gleicher Anzahl anzeigen. |
| Datum | rechtsbündig |
| Uhrzeit | |
| Icons, Checkboxes etc… |
Sonderform: Vergleichstabellen
Speziell bei mehreren ähnlichen Produkten, oder Produkten mit unterschiedlichen Ausprägungen können Vergleichstabellen für die Nutzer hilfreich sein.
Derartige Vergleichstabellen sind aktuell nicht im Einsatz. Konzeption folgt im Bedarfsfall.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Was ist zu texten
- Tabellen-Headline
- Einleitungstext (optional aber zu Empfehlen)
- Spalten-Headlines
- Zellen-Inhalte
- Tabellenbeschriftung (optional aber zu Empfehlen)
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
Keine zusätzlichen Anforderungen an das UX-Writing
UI-Design
Verhaltensregeln (Dos&Donts)
Positionierung und Abstände zu anderen Elementen
Verwendungsbeispiele
Hilfreiches
Ähnliche Elemente
- Sortierung
- Gibt es nur eine (1) Kategorie unter welcher die Informationen eingeteilt werden können, kommen Listen zum Einsatz.